<template>
  <div class="warpbox">
    <div class="leftbox">
      <div class="selectBar">
        <p>相控阵据总览表</p>
        <div class="selectbox">
          <select name="date" id>
            <option value v-for="item in dateList" :key="item.id">{{item.month}}</option>
          </select>
          <select name="region" id>
            <option value v-for="item in regionList" :key="item.id">{{item.regionName}}</option>
          </select>
          <select name="company" id>
            <option value v-for="item in companylist" :key="item.id">{{item.companyName}}</option>
          </select>
        </div>
        <div class="lifeBtn">
          <a href>项目周期一览表></a>
        </div>
      </div>
      <div class="contentbox">
        <div class="line">
          <ul>
            <li v-for="item in line1List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="line">
          <ul>
            <li v-for="item in line2List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="line">
          <ul>
            <li v-for="item in line3List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="line">
          <ul>
            <li v-for="item in line4List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="line">
          <ul>
            <li v-for="item in line5List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="line">
          <ul>
            <li v-for="item in line6List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="line">
          <ul>
            <li v-for="item in line7List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="line">
          <ul>
            <li v-for="item in line7List" :key="item.id">
              <div class="hex">
                <div :style="{'background':item.color}" class="hexin">
                  <span
                    class="text"
                    :style="{'font-size':item.value?'12px':'18px','font-weight':item.title?'bold':'400','margin-top':item.title?'.45rem':'.3rem'}"
                  >{{item.content}}</span>
                  <span class="value" v-if="item.value">{{item.value}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="exportBtn">
          <img src="@/assets/png/333.png" alt="导出视图">
          <span>导出</span>
        </div>
      </div>
      <div class="Legend">
        <ul>
          <li v-for="item in legendList" :key="item.id">
            <div style="float:left" class="hexoutside">
              <div class="hexinside" :style="{'background':item.color}"></div>
            </div>
            <div style="float:left">
              <span>{{item.title}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="rightbox">
      <div class="rightTitle">
        <p class="month">5月项目总数</p>
        <p class="num">
          <span>{{totalNum}}</span>&nbsp;个
        </p>
      </div>
      <div class="onroad">
        <div>
          <span>储存及在途阶段项目</span>&nbsp;&nbsp;&nbsp;
          <span>130个</span>
        </div>
        <div class="subTitle">
          <span>未开工</span>&nbsp;&nbsp;&nbsp;
          <span>104个</span>
          <div class="progress">
            <div class="progress-bar" style="width: 55%; background:#ADD8E6;">
              <span>55%</span>
            </div>
          </div>
        </div>
        <div class="subTitle">
          <span>已开工未开盘</span>&nbsp;&nbsp;&nbsp;
          <span>104个</span>
          <div class="progress">
            <div class="progress-bar" style="width: 55%; background:#ADD8E6;">
              <span>55%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="onroad">
        <div>
          <span>本月首开项目</span>&nbsp;&nbsp;&nbsp;
          <span>1个</span>
        </div>
        <div class="subTitle">
          <span>均价</span>&nbsp;&nbsp;&nbsp;
          <div class="progress">
            <div class="progress-bar" style="width: 100%; background:#FF99CC;">
              <span>100%</span>
            </div>
          </div>
        </div>
        <div class="subTitle">
          <span>面积</span>&nbsp;&nbsp;&nbsp;
          <div class="progress">
            <div class="progress-bar" style="width: 100%; background:#FF99CC;">
              <span>100%</span>
            </div>
          </div>
        </div>
        <div class="subTitle">
          <span>认购率</span>&nbsp;&nbsp;&nbsp;
          <div class="progress">
            <div class="progress-bar" style="width: 100%; background:#FF99CC;">
              <span>100%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="onroad">
        <div>
          <span>持销阶段项目</span>&nbsp;&nbsp;&nbsp;
          <span>390个</span>
        </div>
        <div class="subTitle">
          <span>销售回款</span>&nbsp;&nbsp;&nbsp;
          <div class="progress">
            <div class="progress-bar" style="width: 66%; background:#FFD700;">
              <span>66%</span>
            </div>
          </div>
        </div>
        <div class="subTitle">
          <span>销售均价</span>&nbsp;&nbsp;&nbsp;
          <div class="progress">
            <div class="progress-bar" style="width:32%; background:#FFD700;">
              <span>32%</span>
            </div>
          </div>
        </div>
        <div class="subTitle">
          <span>长期库存</span>&nbsp;&nbsp;&nbsp;
          <div class="progress">
            <div class="progress-bar" style="width: 88%; background:#FFD700;">
              <span>88%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  data() {
    return {
      morkList: [],
      totalNum: 520,
      legendList: [
        { id: 0, title: "优于计划", color: "#6495ED" },
        { id: 1, title: "与计划基本持平", color: "#FFA500" },
        { id: 2, title: "预警", color: "#FF99CC" },
        { id: 3, title: "警示", color: "#B0E0E6" },
        { id: 4, title: "黑榜", color: "#CCCCCC" }
      ],
      dateList: [{ id: 1, month: "2019-5" }, { id: 2, month: "2019-6" }],
      regionList: [
        { id: 1, regionName: "南京" },
        { id: 1, regionName: "北京" }
      ],
      companylist: [
        { id: 1, companyName: "维达纸业" },
        { id: 1, companyName: "上港集团" }
      ],
      line1List: [
        { id: 0, title: true, content: "存储及在途", color: "#e9e9e9" },
        { id: 1, content: "开盘日期", color: "#B0E0E6" },
        {
          id: 2,
          content: "开盘日期早于计划或未到计划开工日期",
          value: "8",
          color: "#6495ED"
        },
        {
          id: 3,
          content: "开盘日期较计划滞后0-2个月",
          value: "6",
          color: "#FFA500"
        },
        {
          id: 4,
          content: "开盘日期较计划滞后2-4个月",
          value: "4",
          color: "#FF99CC"
        },
        {
          id: 5,
          content: "开盘日期较计划滞后4-5个月",
          value: "4",
          color: "#B0E0E6"
        },
        {
          id: 6,
          content: "开盘日期较计划滞后6个月以上",
          value: "4",
          color: "#CCCCCC"
        }
      ],
      line2List: [
        // { id: 0, title: true, content: "存储及在途", color: "#e9e9e9" },
        { id: 1, content: "开盘日期", color: "#B0E0E6" },
        {
          id: 2,
          content: "开盘日期早于计划或未到计划开工日期",
          value: "8",
          color: "#6495ED"
        },
        {
          id: 3,
          content: "开盘日期较计划滞后0-2个月",
          value: "6",
          color: "#FFA500"
        },
        {
          id: 4,
          content: "开盘日期较计划滞后2-4个月",
          value: "4",
          color: "#FF99CC"
        },
        {
          id: 5,
          content: "开盘日期较计划滞后4-5个月",
          value: "4",
          color: "#B0E0E6"
        },
        {
          id: 6,
          content: "开盘日期较计划滞后6个月以上",
          value: "4",
          color: "#CCCCCC"
        }
      ],
      line3List: [
        { id: 0, title: true, content: "首开", color: "#e9e9e9" },
        { id: 1, content: "首开均价", color: "#B0E0E6" },
        {
          id: 2,
          content: "首开均价高于计划",
          value: "8",
          color: "#6495ED"
        },
        {
          id: 3,
          content: "首开均价低于计划0%-3%之间",
          value: "6",
          color: "#FFA500"
        },
        {
          id: 4,
          content: "首开均价低于计划3%-7%之间",
          value: "4",
          color: "#FF99CC"
        },
        {
          id: 5,
          content: "首开均价低于计划7%-10%之间",
          value: "4",
          color: "#B0E0E6"
        },
        {
          id: 6,
          content: "首开均价低于计划10%以上",
          value: "4",
          color: "#CCCCCC"
        }
      ],
      line4List: [
        { id: 1, content: "首开面积", color: "#B0E0E6" },
        {
          id: 2,
          content: "首开面积高于计划",
          value: "8",
          color: "#6495ED"
        },
        {
          id: 3,
          content: "首开面积低于计划0%-3%之间",
          value: "6",
          color: "#FFA500"
        },
        {
          id: 4,
          content: "首开面积低于计划3%-7%之间",
          value: "4",
          color: "#FF99CC"
        },
        {
          id: 5,
          content: "首开面积低于计划7%-10%之间",
          value: "4",
          color: "#B0E0E6"
        },
        {
          id: 6,
          content: "首开面积低于计划10%以上",
          value: "4",
          color: "#CCCCCC"
        }
      ],
      line5List: [
        { id: 1, content: "首开认购率", color: "#B0E0E6" },
        {
          id: 2,
          content: "首开认购率高于计划",
          value: "8",
          color: "#6495ED"
        },
        {
          id: 3,
          content: "首开认购率低于计划0%-3%之间",
          value: "6",
          color: "#FFA500"
        },
        {
          id: 4,
          content: "首开认购率低于计划3%-7%之间",
          value: "4",
          color: "#FF99CC"
        },
        {
          id: 5,
          content: "首开认购率低于计划7%-10%之间",
          value: "4",
          color: "#B0E0E6"
        },
        {
          id: 6,
          content: "首开认购率低于计划10%以上",
          value: "4",
          color: "#CCCCCC"
        }
      ],
      line6List: [
        { id: 0, title: true, content: "持销", color: "#e9e9e9" },
        { id: 1, content: "销售回款", color: "#B0E0E6" },
        {
          id: 2,
          content: "销售回款高于计划",
          value: "8",
          color: "#6495ED"
        },
        {
          id: 3,
          content: "销售回款低于计划0%-3%之间",
          value: "6",
          color: "#FFA500"
        },
        {
          id: 4,
          content: "销售回款低于计划3%-7%之间",
          value: "4",
          color: "#FF99CC"
        },
        {
          id: 5,
          content: "销售回款低于计划7%-10%之间",
          value: "4",
          color: "#B0E0E6"
        },
        {
          id: 6,
          content: "销售回款低于计划10%以上",
          value: "4",
          color: "#CCCCCC"
        }
      ],
      line7List: [
        { id: 1, content: "销售均价", color: "#B0E0E6" },
        {
          id: 2,
          content: "销售均价高于计划",
          value: "8",
          color: "#6495ED"
        },
        {
          id: 3,
          content: "销售均价低于计划0%-3%之间",
          value: "6",
          color: "#FFA500"
        },
        {
          id: 4,
          content: "销售均价低于计划3%-7%之间",
          value: "4",
          color: "#FF99CC"
        },
        {
          id: 5,
          content: "销售均价低于计划7%-10%之间",
          value: "4",
          color: "#B0E0E6"
        },
        {
          id: 6,
          content: "销售均价低于计划10%以上",
          value: "4",
          color: "#CCCCCC"
        }
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
$hexWidth: 100px;
$halfHexWidth: $hexWidth/2;
$boderWidth: 100px;
$hexHight: $hexWidth/1.732;
select::-ms-expand {
  display: none;
}
@mixin hexoutside {
  overflow: hidden;
  width: 0.2rem;
  height: 0.2326rem;
  transform: rotate(-60deg) skewY(30deg);
}
@mixin hexinside {
  background-color: #ccc;
  // display: block;
  position: relative;
  width: 0.2rem;
  height: 0.2326rem;
  line-height: 0.2326rem;
  text-align: center;
  transform: skewY(-30deg) rotate(60deg);
  span.text {
    line-height: 14px;
    height: 14px;
    margin-top: 30%;
    display: inline-block;
  }
  .value {
    line-height: 14px;
    height: 14px;
    margin-top: -30px;
    position: absolute;
    top: 6vw;
    left: 50%;
    transform: translate(-50%, -0%);
    font-size: 20px;
  }
}
.warpbox {
  width: 100%;
  height: 100%;
  display: flex;
  .lifeBtn {
    float: right;
    margin-right: 0.2rem;
    a {
      font-size: 16px;
      color: #5161e9;
      font-weight: 600;
    }
  }
  .leftbox {
    flex: 1;
    // background-color: burlywood;
    min-height: 100%;
    height: auto;
    .selectBar {
      p {
        margin: 20px 0 0 20px;
      }
      select {
        //   appearance: none; 隐藏希腊选择央视
        //   -moz-appearance: none;
        //   -webkit-appearance: none;
        width: 80px;
        vertical-align: middle;
        border: 1px solid #c9c9c9;
        background-color: #fff;
        color: #666;
        height: 25px;
        line-height: 25px;
        padding: 0px 4px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
        //   background:
      }
      select:nth-child(2) {
        margin-left: 2px;
      }
      select:nth-child(3) {
        width: 120px;
        margin-left: 2px;
      }
      .selectbox {
        margin: 5px 0 0 20px;
        float: left;
      }
    }
    .contentbox {
      margin-top: 0.3rem;
      .line {
        width: 100%;
        overflow: hidden;
        .hexWarp {
          width: 100px;
          height: 200px;
          overflow: hidden;
          visibility: hidden;
          overflow: hidden;
        }
        .hexContent {
          width: 100px;
          height: 200px;
          visibility: hidden;
          overflow: hidden;
          transform: rotateZ(60deg);
        }
        .hexInner {
          width: 100px;
          height: 200px;
          overflow: hidden;
          visibility: visible;
          transform: rotateZ(-120deg);
          background: red;
          cursor: pointer;
        }
      }
      .line:nth-child(1) {
        margin: -0.1rem 0 0 3.82rem;
      }
      .line:nth-child(2) {
        margin: -0.3rem 0 0 4.38rem;
      }
      .line:nth-child(3) {
        margin: -0.3rem 0 0 2.73rem;
      }
      .line:nth-child(4) {
        margin: -0.3rem 0 0 3.29rem;
      }
      .line:nth-child(5) {
        margin: -0.3rem 0 0 3.85rem;
      }
      .line:nth-child(6) {
        margin: -0.3rem 0 0 2.19rem;
      }
      .line:nth-child(7) {
        margin: -0.3rem 0 0 2.74rem;
      }
      .line:nth-child(8) {
        margin: -0.3rem 0 0 2.19rem;
      }
      ul {
        list-style: none;
      }
      ul li {
        margin: 0.03rem;
        float: left;
      }
      .hex {
        overflow: hidden;
        display: block;
        width: calc(70vw / 13);
        height: calc(70vw / 11.18);
        transform: rotate(-60deg) skewY(30deg);
      }
      .hexin {
        background-color: #ccc;
        // display: block;
        position: relative;
        width: calc(70vw / 13);
        height: calc(70vw / 11.18);
        line-height: calc(70vw / 11.18);
        text-align: center;
        transform: skewY(-30deg) rotate(60deg);
        span.text {
          line-height: 14px;
          height: 14px;
          margin-top: 0.3rem;
          display: inline-block;
        }
        // .value {
        //   line-height: 14px;
        //   height: 14px;
        //   margin-top: -30px;
        //   position: absolute;
        //   top: 6vw;
        //   left: 50%;
        //   transform: translate(-50%, -0%);
        //   font-size: 20px;
        // }
        @media screen and (min-width: 1440px) and (max-width: 1920px) {
          .value {
            line-height: 14px;
            height: 14px;
            margin-top: -30px;
            position: absolute;
            top: 6vw;
            left: 50%;
            transform: translate(-50%, -0%);
            font-size: 0.2rem;
            font-weight: bold;
          }
        }
        @media screen and (min-width: 980px) and (max-width: 1440px) {
          .value {
            line-height: 14px;
            height: 14px;
            margin-top: -15px;
            position: absolute;
            top: 6vw;
            left: 50%;
            transform: translate(-50%, -0%);
            font-size: 0.2rem;
            font-weight: bold;
          }
        }
      }
    }
    .Legend {
      position: absolute;
      right: 6rem;
      bottom: 0.2rem;
      list-style: none;
      ul {
        list-style: none;
        li {
          :hover {
          }
          cursor: pointer;
          padding: 0.05rem 0;
          clear: both;
          span {
            padding-left: 0.08rem;
          }
        }
      }
      .hexoutside {
        @include hexoutside;
        .hexinside {
          @include hexinside;
        }
      }
    }
    .exportBtn {
      width: 67px;
      height: 28px;
      background-color: cornflowerblue;
      border-radius: 8px;
      text-align: center;
      line-height: 24px;
      position: absolute;
      color: #fff;
      top: 1.2rem;
      right: 5.3rem;
      cursor: pointer;
      span,img {
        vertical-align: middle;
      }
    }
  }
  .rightbox {
    width: 25%;
    // height: 100vh;
    height: 100vh;

    background-color: cornflowerblue;
    color: #fff;
    .rightTitle {
      margin-left: 0.4rem;
      .month {
        margin: 0.3rem 0 0 0;
      }
      .num {
        span {
          font-size: 32px;
        }
        margin-top: 0.2rem;
      }
    }
    .onroad {
      margin: 0.35rem 0 0 0.4rem;
      .title {
      }
      .subTitle {
        margin: 0.1rem 0 0 0;
        .progress {
          height: 0.15rem;
          line-height: 0.15rem;
          background: #d9d9d9;
          -webkit-box-shadow: none;
          box-shadow: none;
          padding: 0.05rem;
          margin-top: 0.1rem;
          overflow: visible;
          border-radius: 0.1rem;
          margin-right: 0.2rem;
          .progress:after {
            content: "";
            display: block;
            border-top: 4px dashed #fff;
            margin-top: 8px;
          }
          .progressbar-title {
            color: #d8dedc;
            font-size: 15px;
            margin: 5px 0;
            font-weight: bold;
          }
          .progress .progress-bar {
            position: relative;
            border-radius: 10px 0 0 10px;
            animation: animate-positive 2s;
          }
          .progress .progress-bar span {
            position: absolute;
            top: -50px;
            right: -40px;
            color: #fff;
            display: block;
            font-size: 17px;
            font-weight: bold;
            padding: 5px 7px;
            background: #333;
            border-radius: 0 0 5px 5px;
          }
          .progress .progress-bar span:before {
            content: "";
            position: absolute;
            bottom: -14px;
            left: 18px;
            border: 7px solid transparent;
            border-top: 7px solid #333;
          }
          .progress .progress-bar span:after {
            content: "\f072";
            font-family: fontawesome;
            font-size: 48px;
            color: #333;
            position: absolute;
            top: 51px;
            right: 6px;
            transform: rotateZ(48deg);
          }
        }
      }
    }
  }
}
</style>
